<template>
  <div class="page">
    <div v-if="!hideTotal">
      共{{ total }}条
      <a-select
        :default-value="defaultPage"
        style="width: 120px; margin-left: 10px"
        @change="pageSizeChange"
      >
        <a-select-option
          v-for="item in pageSizeOptions"
          :key="item"
          :value="item"
        >
          {{ item }}条/页
        </a-select-option>
      </a-select>
    </div>

    <a-pagination
      :show-quick-jumper="!hideTotal"
      :current="defaultCurrent"
      :total="total"
      :pageSize="defaultPage"
      @change="pageChange"
    />
  </div>
</template>
<script>
export default {
  props: {
    total: Number,
    defaultPage: {
      type: Number,
      default: 15,
    },
    defaultCurrent: {
      type: Number,
      default: 1,
    },
    hideTotal: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      pageSizeOptions: [10, 15, 20, 50],
    };
  },
  mounted() {
    setTimeout(() => {
      if (
        document.getElementsByClassName(
          "ant-pagination-options-quick-jumper"
        )[0]
      ) {
        document.getElementsByClassName(
          "ant-pagination-options-quick-jumper"
        )[0].childNodes[0].nodeValue = "前往";
      }
    }, 1000);
  },
  methods: {
    pageSizeChange(val) {
      this.$emit("sizeChange", val);
    },
    pageChange(val) {
      this.$emit("currentChange", val);
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: space-between;
  margin-top: 29px;
}
</style>
